<template>
  <view class="role-tabbar" :style="{ paddingBottom: safeAreaBottom + 'px' }">
    <view class="role-tabbar__inner">
      <view
        v-for="item in renderTabs"
        :key="item.key"
        class="role-tabbar__item"
        :class="{ 'role-tabbar__item--active': item.key === currentKey }"
        @tap="handleSwitch(item)"
      >
        <view class="role-tabbar__icon">{{ item.icon }}</view>
        <text class="role-tabbar__text">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/store/modules/user'

type RoleKey = 'assistant' | 'manager' | 'franchisee'

export interface TabItem {
  key: string
  text: string
  path?: string
  icon: string
}

const props = withDefaults(
  defineProps<{
    current: string
    role?: RoleKey | string
    tabs?: ReadonlyArray<TabItem>
    useRouter?: boolean
  }>(),
  {
    useRouter: true
  }
)

const emit = defineEmits<{
  (event: 'change', item: TabItem): void
}>()

const userStore = useUserStore()

const ROLE_TAB_MAP: Record<RoleKey, ReadonlyArray<TabItem>> = {
  assistant: Object.freeze([
    { key: 'city', text: '同城', path: '/pages/assistant-role/index?tab=city', icon: 'TC' },
    { key: 'store', text: '门店', path: '/pages/assistant-role/index?tab=store', icon: 'MD' },
    { key: 'orders', text: '订单', path: '/pages/assistant-role/index?tab=orders', icon: 'DD' },
    { key: 'profile', text: '我的', path: '/pages/assistant-role/index?tab=profile', icon: 'WD' }
  ]),
  manager: Object.freeze([
    { key: 'home', text: '主页', path: '/pages/manager-role/index?tab=home', icon: 'ZY' },
    { key: 'recruit', text: '招聘', path: '/pages/manager-role/index?tab=recruit', icon: 'ZP' },
    { key: 'orders', text: '订单', path: '/pages/manager-role/index?tab=orders', icon: 'DD' },
    { key: 'profile', text: '我的', path: '/pages/manager-role/index?tab=profile', icon: 'WD' }
  ]),
  franchisee: Object.freeze([
    { key: 'home', text: '首页', path: '/pages/franchisee-role/index?tab=home', icon: 'SY' },
    { key: 'profile', text: '我的', path: '/pages/franchisee-role/index?tab=profile', icon: 'WD' }
  ])
}

const roleKey = computed<RoleKey>(() => {
  const value = (props.role as RoleKey) || userStore.role || 'assistant'
  if (value === 'manager' || value === 'franchisee') return value
  return 'assistant'
})

const renderTabs = computed<ReadonlyArray<TabItem>>(() => {
  if (props.tabs && props.tabs.length > 0) return props.tabs
  return ROLE_TAB_MAP[roleKey.value]
})

const currentKey = computed(() => props.current)

const safeAreaBottom = (() => {
  const info = uni.getSystemInfoSync()
  return info.safeAreaInsets?.bottom || 0
})()

const handleSwitch = (item: TabItem) => {
  if (item.key === currentKey.value) return
  emit('change', item)

  if (props.useRouter && item.path) {
    uni.redirectTo({ url: item.path })
  }
}
</script>

<style lang="scss" scoped>
.role-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  box-shadow: 0 -12rpx 24rpx rgba(0, 0, 0, 0.04);
  z-index: 999;

  &__inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100rpx;
    padding: 0 10rpx;
  }

  &__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #a0a5b0;
    font-size: 24rpx;
    transition: color 0.2s ease;

    &--active {
      color: #00c9a7;
    }
  }

  &__icon {
    font-size: 34rpx;
    line-height: 38rpx;
    margin-bottom: 8rpx;
  }

  &__text {
    line-height: 1;
  }
}
</style>
